<template>
    <el-container class="profile-container">
        <el-header>
            <div class="top-wrap">
                <div class="title">
                    <span>基本信息</span>

                </div>
                <div class="bottom">
                    <el-aside class="profile-sidebar">
                        <el-avatar class="profile-avatar" size="large" :src="avatarUrl"></el-avatar>
                    </el-aside>
                    <div class="right-content">
                        <el-descriptions :column="2">
                            <el-descriptions-item label="账号昵称：">{{userName}}</el-descriptions-item>
                            <el-descriptions-item label="账号ID：">10025553178</el-descriptions-item>
                            <el-descriptions-item label="APPID：">1311918816</el-descriptions-item>
                            <el-descriptions-item label="认证状态：">审核通过</el-descriptions-item>
                            <el-descriptions-item label="所属行业：">快递 - 快递员</el-descriptions-item>
                            <el-descriptions-item label="注册时间：">2022-05-14 12:23:02</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>


            </div>
        </el-header>

        <el-main>

            <div class="content">
                <div class="title">
                    <div class="top">
                        <span>登录方式</span>
                    </div>
                    <div class="bottom">
                        <span>账号支持多张登录方式，便捷管理云账号</span>
                    </div>
                </div>
                <div class="info">
                    <div class="we-chat">
                        <div class="left">
                            <span>微信(注册方式)</span>
                        </div>
                        <div class="middle">
                            <span>支持微信扫码授权登录</span>
                        </div>
                        <div class="right">
                            <span>yellow永</span>
                        </div>
                    </div>
                    <div class="qq">
                        <div class="left">
                            <span>QQ</span>
                        </div>
                        <div class="middle">
                            <span>支持QQ授权登录</span>
                        </div>
                        <div class="right">
                            <span>凛冬已至</span>
                        </div>
                    </div>
                    <div class="en-we-chat">
                        <div class="left">
                            <span>企业微信</span>
                        </div>
                        <div class="middle">
                            <span>支持企微扫码授权登录</span>
                        </div>
                        <div class="right">
                            <span>未关联</span>
                        </div>
                    </div>
                    <div class="email">
                        <div class="left">
                            <span>邮箱</span>
                        </div>
                        <div class="middle">
                            <span>支持账号密码登录</span>
                        </div>
                        <div class="right">
                            <span>2695083201@qq.com</span>
                        </div>
                    </div>
                    <div class="public-account">
                        <div class="left">
                            <span>微信公众号</span>
                        </div>
                        <div class="middle">
                            <span>支持小程序、公众号授权登录</span>
                        </div>
                        <div class="right">
                            <span>未关联</span>
                        </div>
                    </div>
                </div>

            </div>


        </el-main>


    </el-container>
</template>

<script setup lang="ts">
import {useAuthStore} from "@/store/userInfo"

const authStore = useAuthStore()
const avatarUrl:string = authStore.avatarUrl
const userName:string = authStore.username
</script>

<style scoped lang="less">
.profile-container {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    .el-header {
        height: 20vh;
        margin-top: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
       

        .top-wrap {
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            border-radius: 0.3rem;

            .title {
                flex: 1;
                width: 100%;

                display: flex;
                justify-content: flex-start;
                align-items: center;

                span {
                    font-weight: 700;
                    margin-left: 1rem;
                }
            }

            .bottom {
                width: 100%;
                flex: 4;
                display: flex;

                .profile-sidebar {
                    flex: 1;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .right-content {
                    flex: 10;
                    /* background-color: bisque; */

                    .el-descriptions {
                        box-shadow: none;
                        /* 移除默认的阴影效果 */
                        border: none;
                        /* 移除默认边框 */
                        background: none !important;
                        padding: 10px 0px 0 15px;
                    }

                    .el-descriptions-item {
                        border-bottom: 1px solid #ebeef5;
                        /* 仅保留下边框来分隔项目 */
                        padding: 10px 0;
                        /* 增加项目内部的上下间隔 */
                    }

                    /* 最后一个项不需要下边框 */
                    .el-descriptions-item:last-child {
                        border-bottom: none;
                    }
                }

            }
        }
    }

    .el-main {
        height: 35rem;
        
        display: flex;
        justify-content: center;
        align-items: center;

        .content {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            border-radius: 0.3rem;
            width: 80%;
            height: 80%;

            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            .title {
                width: 100%;
                flex: 1;

                display: flex;
                flex-direction: column;

                .top {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    span {
                        font-weight: 700;
                        margin-left: 1rem;
                    }
                }

                .bottom {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    span {
                        font-size: 0.8rem;
                        margin-left: 1rem;
                        color: grey;
                    }
                }
            }

            .info {
                width: 100%;
                flex: 5;

                display: flex;
                flex-direction: column;

                .we-chat {
                    width: 100%;
                    flex: 1;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .left {
                        width: 15%;
                        height: 100%;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;

                        }
                    }

                    .middle {
                        width: 15%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;
                        }
                    }

                    .right {
                        flex: 1;
                        height: 100%;

                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            color: rgb(16, 15, 15);
                            font-size: 0.9rem;
                            font-weight: bold;
                            margin-left: 3rem;
                        }
                    }
                }

                .qq {
                    width: 100%;
                    flex: 1;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .left {
                        width: 15%;
                        height: 100%;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;

                        }
                    }

                    .middle {
                        width: 15%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;
                        }
                    }

                    .right {
                        flex: 1;
                        height: 100%;

                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            color: rgb(16, 15, 15);
                            font-size: 0.9rem;
                            font-weight: bold;
                            margin-left: 3rem;
                        }
                    }
                }

                .en-we-chat {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .left {
                        width: 15%;
                        height: 100%;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;

                        }
                    }

                    .middle {
                        width: 15%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;
                        }
                    }

                    .right {
                        flex: 1;
                        height: 100%;

                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            color: rgb(16, 15, 15);
                            font-size: 0.9rem;
                            font-weight: bold;
                            margin-left: 3rem;
                        }
                    }
                }

                .email {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .left {
                        width: 15%;
                        height: 100%;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;

                        }
                    }

                    .middle {
                        width: 15%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;
                        }
                    }

                    .right {
                        flex: 1;
                        height: 100%;

                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            color: rgb(16, 15, 15);
                            font-size: 0.9rem;
                            font-weight: bold;
                            margin-left: 3rem;
                        }
                    }
                }

                .public-account {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .left {
                        width: 15%;
                        height: 100%;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;

                        }
                    }

                    .middle {
                        width: 15%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: grey;
                            font-size: 0.8rem;
                        }
                    }

                    .right {
                        flex: 1;
                        height: 100%;

                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            color: rgb(16, 15, 15);
                            font-size: 0.9rem;
                            font-weight: bold;
                            margin-left: 3rem;
                        }
                    }
                }
            }
        }
    }
}

.profile-sidebar {
    text-align: center;
    border-right: 1px solid #ebeef5;
    padding: 20px;
}

.profile-avatar {
    margin-bottom: 20px;
}

.profile-name {
    font-size: 20px;
    font-weight: bold;
}

.profile-contact {
    margin-top: 10px;
}

.profile-main {
    padding: 20px;
}

.profile-section {
    margin-bottom: 40px;
}

.profile-section-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 20px;
}

.experience-dot {
    background-color: #409eff;
}
</style>